<template>
	<!-- 注册 -->
	<div id="app" class="app1">
		<div class="demo-image2">
			<div class="link1"><router-link type="primary" to="/">立即登录</router-link>已有账号？</div>
		</div>
		<el-divider></el-divider>
		<el-card class="box-card">
			<div id="flexx">
				<div class="flexx-from">
					<h2>欢迎注册软特来福账号</h2>
					<div class="flexx-from1">
						<el-form ref="form" :model="form" label-width="80px">
							<el-form-item label="用户名称">
								<el-col :span="25">
									<el-input type="text" v-model="form.name" prefix-icon="el-icon-user" placeholder="输入姓名"></el-input>
								</el-col>
							</el-form-item>
							<el-form-item label="性别">
								<el-select v-model="form.region" placeholder="性别">
									<el-option label="男" value="man"></el-option>
									<el-option label="女" value="woman"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="出生日期">
								<el-col :span="20">
									<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
								</el-col>
							</el-form-item>
							<el-form-item label="手机号">
								<el-col :span="25">
									<el-input type="text" v-model="form.phone" prefix-icon="el-icon-mobile-phone" placeholder="输入您的手机号"></el-input>
								</el-col>
							</el-form-item>
							<el-form-item label="用户密码">
								<el-col :span="25">
									<el-input type="password" v-model="form.password" prefix-icon="el-icon-lock" placeholder="输入您的密码"></el-input>
								</el-col>
							</el-form-item>
							<el-form-item>
								<el-col :span="25">
									<el-input type="password" v-model="form.repassword" prefix-icon="el-icon-lock" placeholder="再次输入您的密码"></el-input>
								</el-col>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="onSubmit">立即注册</el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</div>
		</el-card>
		
		<el-divider></el-divider>
	</div>
</template>

<script>
	export default {
		data() {
			const validatePass = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请输入密码"));
				} else {
					if (this.ruleForm.repassword !== "") {
						this.$refs.ruleForm.validateField("repassword");
					}
					callback();
				}
			};
			const validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'))
				} else if (value !== this.info.password) {
					callback(new Error('两次输入密码不一致!'))
				} else {
					callback()
				}
			};

			return {
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					phone: '',
					password: '',
					repassword: '',
					type: []
				},

				info: {},
				rules: {
					password: [{
							required: true,
							message: "请输入密码",
							trigger: "blur"
						},
						{
							min: 6,
							max: 16,
							message: "长度在 6 到 16 个字符",
							trigger: "blur",
						},
						{
							validator: validatePass,
							trigger: "blur"
						},
					],
					repassword: [{
							required: true,
							message: "请确认密码",
							trigger: "blur"
						},
						{
							min: 6,
							max: 16,
							message: "长度在 6 到 16 个字符",
							trigger: "blur",
						},
						{
							validator: validatePass2,
							trigger: "blur",
							required: true
						},
					],
				},

				url: 'https://img-blog.csdnimg.cn/20201220233836522.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rldm90aW9uX0lU,size_16,color_FFFFFF,t_70#pic_center'
			}
		},
		methods: {
			onSubmit() {
				console.log('submit!');
			}
		},
		beforeRouteUpdate(to, from, next) {
			// 做一些想要做的处理...
			// this.errCode = to.params.code
			// this.info = formatErrorMsg(this.errCode)
			next() // 一定要有next
		}
	}
</script>

<style>
	.app1{
		margin-top: 0rem;
		margin-bottom: 0rem;
		background-image: url(../assets/huaxue.png);
		
	}
	.link1{
		display: flex;
		flex-direction: row-reverse;
		margin-right: 10%;
	}
	.demo-image2 {
		margin-left: 10%;
		margin-top: 3%;
	}

	.demo-image3 {
		margin-left: 40%;
		margin-top: 5%;
	}

	.flexx {
		display: flex;
		flex-direction: row;
		margin-top: 50%;
		margin-left: 50%;

	}

	.flexx-from {
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.flexx-from1 {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.box-card {
		margin: auto;
		width: 50%;
		height: 50%;
		top: 50%;
		left: 50%;
		padding: 6px;

	}
</style>
